<mat-table #table [dataSource]="dataSource"
           [@animateStagger]="{value:'50'}">
    <!-- Checkbox Column -->
    <ng-container matColumnDef="checkbox">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell *matCellDef="let contact">
            <mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
                          (click)="$event.stopPropagation()">
            </mat-checkbox>
        </mat-cell>
    </ng-container>

    <!-- Avatar Column -->
    <ng-container matColumnDef="avatar">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell *matCellDef="let contact">
            <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                 [src]="contact.avatar"/>
        </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let contact">
            <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
        </mat-cell>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
            <p class="email text-truncate">
                {{contact.email}}
            </p>
        </mat-cell>
    </ng-container>

    <!-- Phone Column -->
    <ng-container matColumnDef="phone">
        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
            <p class="phone text-truncate">
                {{contact.phone}}
            </p>
        </mat-cell>
    </ng-container>

    <!-- Job Title Column -->
    <ng-container matColumnDef="jobTitle">
        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
            <p class="job-title text-truncate">
                {{contact.jobTitle}}
            </p>
        </mat-cell>
    </ng-container>

    <!-- Company Column -->
    <ng-container matColumnDef="company">
        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
            <p class="company text-truncate">
                {{contact.company}}
            </p>
        </mat-cell>
    </ng-container>

    <!-- Buttons Column -->
    <ng-container matColumnDef="buttons">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell *matCellDef="let contact">
            <div fxFlex="row" fxLayoutAlign="end center">
                <button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
                    <mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
                    <mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_border</mat-icon>
                </button>

                <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"
                        (click)="$event.stopPropagation();">
                    <mat-icon class="secondary-text">more_vert</mat-icon>
                </button>

                <mat-menu #moreMenu="matMenu">
                    <button mat-menu-item aria-label="remove" (click)="deleteContact(contact)">
                        <mat-icon>delete</mat-icon>
                        <span>Remove</span>
                    </button>
                </mat-menu>
            </div>

        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let contact; columns: displayedColumns;"
             class="contact"
             (click)="editContact(contact)"
             [ngClass]="{'accent-50':checkboxes[contact.id]}"
             matRipple
             [@animate]="{value:'*',params:{y:'100%'}}">
    </mat-row>
</mat-table>


